<template>
  <view>
    <up-popup round="16" :show="modelValue" :closeOnClickOverlay="true" @close="close" mode="bottom" @open="open">
      <view class="coupon-box_wrap" style="height: 1000rpx;padding-bottom: 20rpx;box-sizing: border-box">
        <z-paging ref="paging" :fixed="false" v-model="dataList" @query="queryList">
          <template #top>
            <view class="flex-center-end ">
              <view class="title">
                订单评论
              </view>
              <view @tap="close()">
                <image src="http://www.xvopen.com/xiaoV/img1/close.png" mode=""></image>
              </view>
            </view>
            <view class="head-vessel flex-a-center">
              <view :class="commentHeadIndex==0?'active':''" >
                评论数({{commentCount}})
              </view>
            </view>
          </template>
          <view class="comment-mask-item" v-for="(item,index) in dataList" :key="index">
            <view class="top flex-center-between">
              <view class="flex-a-center">
                <image class="logo" src="/static/logo.png" mode=""></image>
                <view class="nick-name">
                  {{item.createUserName}}
                </view>
              </view>
              <!--            <star  :starRate="3"></star>-->
              <star :starRate="item.overallScore" :width="'180rpx'" :height="'32rpx'"></star>

            </view>
            <view class="mid flex-center-between">

              <view>
                {{formatDateYYMMDDHHMM(item.createTime )}}
              </view>
            </view>
            <view class="bottom">
              <view class="desc">
               {{item.content}}
              </view>
              <view class="flex-wrap" v-if="item.images">
                <block v-for="(item,index) in JSON.parse(item.images) " :key="index">
                  <image :src="item" mode=""></image>
                </block>
              </view>
            </view>
          </view>
        </z-paging>

      </view>



    </up-popup>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { defineProps, defineEmits } from 'vue';
import {commentListStoreComment, newsList} from '@/api/pagesShop'
import {useCustomStores} from '@/utils/hook'
const {ShopStore} = useCustomStores()
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  pictureNum:{
    type: Number,
    default: 0
  },
  commentCount:{
    type: Number,
    default: 0
  },

  couponList:{
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(['update:modelValue', 'get-coupon']);
const  show = ref(true)
const paging = ref(null)
const dataList =ref([])
const close =()=>{
  emit('update:modelValue', false);
}
const handleGetCoupon = (couponId) => {
  emit('get-coupon', couponId);
};
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  commentListStoreComment({
    pageNum: pageNo,
    pageSize: pageSize,
    storeId:ShopStore.shopInfo.storeId
  }).then(res=>{
    paging.value.complete(res)
  })

}
function formatDateYYMMDDHHMM(timestamp) {
  const date = new Date(timestamp);
  const yyyy = date.getFullYear();
  const mm = String(date.getMonth() + 1).padStart(2, '0');
  const dd = String(date.getDate()).padStart(2, '0');
  const hh = String(date.getHours()).padStart(2, '0');
  const min = String(date.getMinutes()).padStart(2, '0');
  return `${yyyy}-${mm}-${dd} ${hh}:${min}`;
}
</script>

<style lang="scss">
.coupon-box_wrap{
  box-sizing: border-box;
  padding: 0 24rpx;
  .flex-center-end{
    padding-top: 32rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .title{
      flex: 1;
      font-weight: 700;
      font-size: 32rpx;
      text-align: center;

    }
    image{
      width: 32rpx;
      height: 32rpx;
    }

  }
}
.head-vessel{
  padding: 40rpx 16rpx 32rpx 0;
  border-bottom: 1rpx solid rgba(229, 229, 229, 0.6);
  view{
    padding: 8rpx 16rpx;
    border-radius: 4rpx;
    color: #5B5B5B;
    background-color: #CCE6FF;
    margin-right: 20rpx;
  }
  .active{
    background-color: #0080FF;
    color: #fff;
  }
}
.comment-mask-item{
  padding-bottom: 16rpx;
  .top{
    font-size: 28rpx;
    margin: 24rpx 0 8rpx;
    padding-right: 16rpx;
    .logo{
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      background-color: #ddd;
      margin: 0 16rpx 0 0;
    }
  }
  .mid{
    font-size: 28rpx;
    color: #999;
    margin-bottom: 12rpx;
    padding-right: 16rpx;
    .type{
      width: 520rpx;
    }
  }
  .bottom{
    .desc{
      margin-bottom: 16rpx;
      padding-right: 16rpx;
    }
    image{
      width: 218rpx;
      height: 218rpx;
      border-radius: 8rpx;
      background-color: #eee;
      margin: 0 16rpx 16rpx 0;
    }
  }
}
//.logo{
//  width: 48rpx;
//  height: 48rpx;
//  border-radius: 50%;
//  background-color: #ddd;
//  margin: 0 16rpx 0 0;
//}
</style>
